<template>
  <div class="flh_datakb">
    <div class="mainView">
      <mainTitle :hideLogo="false">
        <span slot="title" class="title">房源数据看板</span>
      </mainTitle>
      <color-row-tab class="colorRowTab" v-model="titleArr"></color-row-tab>
      <div class="chartBox">
        <div class="leftBox">
          <p class="tit">房源分布</p>
          <div class="chartContent">
            <pie-chart v-model="pieChartData" :chartStyle="'width:100%;min-height:500px;'" :option="pieChartOption"></pie-chart>
          </div>
        </div>
        <div class="rightBox">
          <p class="tit">新增房源趋势</p>
          <div class="chartContent">
            <line-chartss v-model="lineChartssData" :chartStyle="'width:100%;min-height:500px;'" :option="lineChartOption"></line-chartss>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mainTitle from "@/components/flh/dataKanban/mainTitle";
import colorRowTab from "./components/colorRowTab";
import {
  GetDataByDoubleTargetForTwo,
  GetDoubleDetailList,
  GetFLHHousingData
} from "@/api/flh/home";
export default {
  components: {
    mainTitle,
    colorRowTab
  },
  data() {
    return {
      titleArr: [],
      pieChartData: [],
      lineChartssData: {},
      pieChartOption: {
        color: [
          "#2BE851",
          "#55EDA7",
          "#23DDCC",
          "#1EC1FF",
          "#108AF2",
          "#5252FF",
          "#FFD71A",
          "#FF614A",
          "#5252FF",
          "#108AF2",
          "#23DDCC"
        ],
        radius: ["0%", "50%"],
        center: ["50%", "50%"],
        roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return "{value|" + value.name + "}";
        },
        hidePieMargin: false,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      lineChartOption: {
        grid: {
          top: "8%",
          left: "5%",
          right: "10%",
          bottom: "20%"
        },
        legendColor: "#fff",
        legend: {
          top: "90%"
        },
        hideLineColor: false,
        showSymbol: "none",
        tooltip: {
          show: true,
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(253,196,9,0.2)",
              shadowBlur: 10,
              shadowColor: "#FDC409"
            }
          }
        },
        showLabel: false,
        xAxis: {
          z: 10,
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: "rgba(85, 237, 167, 0.1)"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "black"
            }
          },
          axisLabel: {
            rotate: 0,
            inside: false,
            rich: {
              value: {
                color: "#fff"
              }
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: "#E5E5E5"
          }
        },
        color: ["#2BE851", "#1EC1FF", "#FDC409"],
        startColor: [
          "rgba(43,232,81,0.5)",
          "rgba(30,193,255,0.5)",
          "rgba(253,196,9,0.5)"
        ],
        endColor: [
          "rgba(43,232,81,0.5)",
          "rgba(30,193,255,0.5)",
          "rgba(253,196,9,0.5)"
        ]
      }
    };
    // compoe
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.fetchTop(); // topcell
      this.fetchPieData();
      this.fetchLineData();
    },
    async fetchLineData() {
      var params = {
        queryType: "18003",
        timeType: "3010",
        timeAccuracy: "4003",
        cityId: 36001
      };
      var res = await GetDoubleDetailList(params);
      if (res.data.code === "0") {
        var tradingInArr = res.data.result;
        this.$set(this, "lineChartssData", tradingInArr);
      }
    },
    async fetchTop() {
      var params = {
        cityId: 36001,
        timeType: "3008"
      };
      var res = await GetFLHHousingData(params);
      if (res.data.code === "0") {
        var result = res.data.result;
        var arr = [
          {
            dataArr: [
              {
                name: "月度在售房源数量",
                value: result.onSale,
                decimals: 0
              },
              {
                name: "月度新增房源数量",
                value: result.newHousing,
                decimals: 0
              }
            ],
            unit: ""
          },
          {
            dataArr: [
              {
                name: "优质房源占比",
                value: result.qualityHouseRatio,
                decimals: 1
              }
            ],
            unit: "%"
          },
          {
            dataArr: [
              {
                name: "新增房源成交率",
                value: result.newHousingTurnoverRatio,
                decimals: 1
              }
            ],
            unit: "%"
          }
        ];
        this.$set(this, "titleArr", arr);
      }
    },
    async fetchPieData() {
      var params = {
        timeType: "3008",
        cityId: 36001,
        queryType: "18008"
      };
      var res = await GetDataByDoubleTargetForTwo(params);
      if (res.data.code === "0") {
        var shopArr = res.data.result;
        this.$set(this, "pieChartData", shopArr);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../../styles/base/_parameters";
.flh_datakb {
  @include absoluteAllSides;
  overflow: hidden;
  .mainView {
    @include absoluteAllSides(40, 40, 40, 120);
    .title {
      font-size: 48px;
      font-weight: bold;
    }
    .colorRowTab {
      margin-top: 90px;
    }
    .chartBox {
      display: flex;
      flex: 1;
      margin-top: 90px;
      .tit {
        font-size: 30px;
        color: #55eda7;
      }
      .leftBox {
        flex: 0.4;
      }
      .rightBox {
        flex: 0.6;
      }
    }
  }
}
</style>